<template>
<h1>V-Model示例</h1>
<div>
    <label>输入框</label>
    <!-- v-model 把输入的值传到script里面定义的变量,然后我们用{{  }}文本插值去看一看是不是能拿到 -->
    <input v-model="textInput" placeholder="输入框"/>
    <p>{{ textInput }}</p>
</div>

<div>
    <label>您的性别</label>
    <!-- v-model 可以用来单选绑定 -->
    <div>
        <input type="radio" id="male" value="男人" v-model="gender" />
        <label for="male">男</label>
        <input type="radio" id="female" value="女人" v-model="gender" />
        <label for="female">女</label>
    </div>
    <p>您的性别: {{ gender }}</p>
</div>

<div>
    <label>选择你的爱好</label>
    <!-- v-model 可以用来多选绑定 -->
    <div>
        <input type="checkbox" id="hobby1" value="读书" v-model="hobbies" />
        <label for="hobby1">读书</label>
        <input type="checkbox" id="hobby2" value="睡觉" v-model="hobbies" />
        <label for="hobby2">睡觉</label>
        <input type="checkbox" id="hobby3" value="原神" v-model="hobbies" />
        <label for="hobby3">原神</label>
    </div>
    <p>您的兴趣: {{ hobbies }}</p>
</div>

<div>
    <label>选择你的水平</label>
    <!-- v-model 可以用在选择标签里面 -->
    <div>
        <label></label>
        <select id="scope" v-model="selectScope">
            <option disabled value="">请选择</option>
            <option>优秀</option>
            <option>良好</option>
            <option>一般</option>
        </select>
    </div>
    <p>您的水平: {{ selectScope }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue'
const textInput = ref('') //文本绑定的值
const gender = ref('') //单选,性别绑定的值
const hobbies = ref([]) //多选绑定的值
const selectScope = ref('')


</script>

<style scoped>
</style>